export default function (fm, e) {
  console.log(fm,e)
  if (!e || e.length <= 3) return fm
  let _geometries = []
  e.forEach(item => {
    let _g = {}
    _g.position = new TMap.LatLng(item.latitude, item.longitude)
    _geometries.push(_g)
  })

  // 创建点聚合
  console.log(fm.cluster)
  if (fm.cluster) fm.cluster.setMap(null)
  fm.cluster = new TMap.MarkerCluster({
    id: 'cluster',
    map: fm.map,
    enableDefaultStyle: false, // 关闭默认样式
    minimumClusterSize: 3,
    geometries: _geometries,
    zoomOnClick: true,
    gridSize: 60,
    averageCenter: false
  });

  var clusterBubbleList = [];
  var markerGeometries = [];
  var marker = null;

  // 监听聚合簇变化
  fm.cluster.on('cluster_changed', function (e) {
    // 销毁旧聚合簇生成的覆盖物
    if (clusterBubbleList.length) {
      clusterBubbleList.forEach(function (item) {
        item.destroy();
      })
      clusterBubbleList = [];
    }
    markerGeometries = [];

    // 根据新的聚合簇数组生成新的覆盖物和点标记图层
    var clusters = fm.cluster.getClusters();
    clusters.forEach(function (item) {
      if (item.geometries.length > 1) {
        let clusterBubble = new ClusterBubble({
          map: fm.map,
          position: item.center,
          content: item.geometries.length,
        });
        clusterBubble.on('click', () => {
          fm.map.fitBounds(item.bounds);
        });
        clusterBubbleList.push(clusterBubble);
      } else {
        markerGeometries.push({
          position: item.center
        });
      }
    });

    if (marker) {
      // 已创建过点标记图层，直接更新数据
      marker.setGeometries(markerGeometries);
    } else {
      // 创建点标记图层
      marker = new TMap.MultiMarker({
        map: fm.map,
        styles: {
          default: new TMap.MarkerStyle({
            'width': 34,
            'height': 42,
            'anchor': {
              x: 17,
              y: 21,
            },
            'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png',
          }),
        },
        geometries: markerGeometries
      });
    }
  });


  // 以下代码为基于DOMOverlay实现聚合点气泡
  function ClusterBubble(options) {
    TMap.DOMOverlay.call(this, options);
  }

  ClusterBubble.prototype = new TMap.DOMOverlay();

  ClusterBubble.prototype.onInit = function (options) {
    this.content = options.content;
    this.position = options.position;
  };

  // 销毁时需要删除监听器
  ClusterBubble.prototype.onDestroy = function () {
    this.dom.removeEventListener('click', this.onClick);
    this.removeAllListeners();
  };

  ClusterBubble.prototype.onClick = function () {
    this.emit('click');
  };

  // 创建气泡DOM元素
  ClusterBubble.prototype.createDOM = function () {
    var dom = document.createElement('div');
    dom.classList.add('clusterBubble');
    dom.innerText = this.content;
    dom.style.cssText = `
      width:${40 + parseInt(this.content) * 2}px;
      height:${40 + parseInt(this.content) * 2}px;
      background-color: rgb(255,211,3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    `

    // 监听点击事件，实现zoomOnClick
    this.onClick = this.onClick.bind(this);
    // pc端注册click事件，移动端注册touchend事件
    dom.addEventListener('click', this.onClick);
    return dom;
  };

  ClusterBubble.prototype.updateDOM = function () {
    if (!this.map) {
      return;
    }
    // 经纬度坐标转容器像素坐标
    let pixel = this.map.projectToContainer(this.position);

    // 使文本框中心点对齐经纬度坐标点
    let left = pixel.getX() - this.dom.clientWidth / 2 + 'px';
    let top = pixel.getY() - this.dom.clientHeight / 2 + 'px';
    this.dom.style.transform = `translate(${left}, ${top})`;

    this.emit('dom_updated');
  }

  return fm
}


// fm = useCluster(fm,e)